<template>
    <div class="platform">
        <my-tag :title="title" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="优惠券ID" prop="schemeName">{{ form.schemeName }}</el-form-item>
                    <el-form-item label="优惠券名称" prop="designIdea">{{ form.designIdea }}</el-form-item>
                    <el-form-item label="优惠券渠道" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="核销机构" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <!-- <el-form-item label="已售券(张)" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="已核销(张)" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="已核销金额(元)" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="未核销(张)" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="未核销金额(元)" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="已打款金额(元)" prop="couponFrom">{{ form.couponFrom }}</el-form-item>
                    <el-form-item label="未打款金额(元)" prop="couponFrom">{{ form.couponFrom }}</el-form-item> -->

                </div>
                <div class="form-right">
                    <el-form-item label="手机号" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="用户名称" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="头像" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="领取时间" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="使用时间" prop="number">{{ form.number }}</el-form-item>
                    <el-form-item label="核销账号" prop="number">{{ form.number }}</el-form-item>
                    <div v-if="isEdit === 'edit'">
                        <el-form-item label="打款状态" prop="materialSupplierStatus" style="width:40%;min-width:350px;">
                            <el-select v-model="form.materialSupplierStatus" placeholder="请选择打款状态" size="large">
                                <el-option disabled label="未打款" :value="0" />
                                <el-option label="已打款" :value="1" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item label="打款状态" prop="materialSupplierStatus">
                            <el-tag :type="form.refundStatus === 0 ? 'danger' : 'success'">{{
                                form === 0 ? '未打款' : '已打款' }}</el-tag>
                        </el-form-item>
                    </div>
                    <div v-if="isEdit === 'edit'">
                        <el-form-item label="打款凭证" prop="img">
                            <image-upload v-model="form.img" :limit="20"></image-upload>
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item label="打款凭证" prop="materialSupplierStatus">
                            <ImagePreview :width="100" :height="100" :src="form.msHairstyleUrl" style="margin:0 10px 10px 0"
                                :preview-src-list="[form.msHairstyleUrl]" />
                        </el-form-item>

                    </div>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm" v-if="isEdit === 'edit'">提交</el-button>
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/api/decor/designer";
import { getRemit, updateRemit } from "@/api/decor/remitMGT";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
let title = ref('')
let isEdit = ref('')
const data = reactive({
    form: {},
    // 弹框表格搜索
    recordQueryParams: {
        pageSize: 2,
        pageNum: 1,
        names: ''
    },
    rules: {
        remark: [{ required: true, message: "审核未通过原因不能为空", trigger: "blur" }],
        materialSupplierStatus: [
            { required: true, message: "请选择材料商状态", trigger: "blur" }
        ],
    }
});
const { form, recordQueryParams, rules } = toRefs(data);
const name = ref('');
// 获取数据
(() => {
    const remitId = route.params.remitId
    title.value = route.params.origin === 'edit' ? '打款管理' : '打款详情'
    isEdit.value = route.params.origin
    // tableDataLoading.value = true
    // recordLoading.value = true
    // if (remitId) {
    //     getRemit(remitId).then(response => {
    //         tableDataLoading.value = false
    //         recordLoading.value = false
    //     });
    // }

})();
// 搜索
const handleQuery = () => {
    recordQueryParams.value.pageNum = 1;
    getList();
}
// 重置
const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
}
// 优惠券详情
const detailHandel = (row) => {
    if (form.value.couponFrom === '材料商') {
        router.push('/MaterialStore/auditMaterial/' + row.id + '/detail')
    } else {
        router.push('/designAgency/auditDesignAgencyDeco/' + row.id + '/detail')
    }
}
// 提交
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value.materialSupplierId != null) {
                proxy.$modal.confirm('是否确认提交当前操作？').then(function () {
                    return updateRemit(form.value);
                }).then(() => {
                    proxy.$modal.msgSuccess("提交成功");
                    router.go(-1)
                }).catch(() => { });
            }
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回
const goBack = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 4px 0 4px;
        }
    }
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}
</style>